<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div style="height: 20px;"></div>
        <el-table :data="page.records"  border>
          <el-table-column prop="leagueClassName" label="团课名" width="100"></el-table-column>
          <el-table-column prop="venueName" label="场馆名" width="100"></el-table-column>
          <el-table-column prop="classTypeName" label="课程类别名" width="150"></el-table-column>
          <el-table-column prop="leagueClassState" label="课程状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.leagueClassState === 1">可预约</span>
              <span v-else-if="scope.row.leagueClassState === 2">已约满</span>
              <span v-else>已完课</span>
            </template>
          </el-table-column>
          <el-table-column prop="leagueClassDetail" label="课程描述" width="344"></el-table-column>
          <el-table-column prop="classroomId" label="教室号" width="100"></el-table-column>
          <el-table-column prop="classroomType" label="教室类型" width="100"></el-table-column>
          <el-table-column prop="price" label="价格" width="100"></el-table-column>
          <el-table-column prop="minute" label="分钟数" width="100"></el-table-column>
          <el-table-column prop="classNum" label="课程数量" width="100"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MyCourse',
  data() {
    return {
      page:{},
      param:{
        pageNum:1,
        pageSize:5,
      },
      }
  },
  methods: {
    fetchVenues() {
      /**
       * 调用方法 查询我的团课
       */
      this.$http.get('product/yLeagueClass/CoachLeagueClassMessage',{
        params:{
          pageNum:this.param.pageNum,
          pageSize:this.param.pageSize
        }
      })
      .then(resp => {
        this.page=resp.data.data;
      })
    }
  },
  created() {
    this.fetchVenues();
  }
};
</script>

<style>
.el-table .el-table__cell {
  white-space: normal;
}
</style>
